<template>
  <div>
    <div class="title">
      <h4>{{ data1.title }}</h4>
    </div>
    <div class="zhuti">
      <img :src="`/img/${data1.bigpicture}`" alt="" />
      <p class="p1">材料</p>
      <p class="p1" v-html="data1.cialiao">{{ data1.cialiao }}</p>
      <p class="p1">做法</p>
      <p class="p1" v-html="data1.zuofa"></p>
      <p>关键词</p>
      <p v-html="data1.guanjianci"></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: "",
    };
  },
  mounted() {
    this.data1 = this.$route.params.data;
    if (this.data1) {
      window.sessionStorage.setItem("data", JSON.stringify(this.data1));
    } else {
      this.data1 = JSON.parse(window.sessionStorage.getItem("data"));
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
<style scoped>
.title {
  color: #817c74;
  padding-left: 10px;
  text-align: center;
  font-size: 19px;
}
.title h4 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.zhuti {
  width: 95%;
  margin: 0 auto;
}
.zhuti img {
  display: inline-block;
  width: 100%;
}
.zhuti .p1 {
  border-bottom: 1px solid #f2efed;
}
</style>